<template>
    <div>
        <basic-dialog :visible="show"
                title="更换备件"
                isShowClose
                :min-width="'500px'"
                @close="$emit('close')">
            <div class="page-content" style="padding: 20px 0">
              <q-table :data="tableData"
                          :columns="columns"
                          row-key="id"
                          class="myTable scroll stick-to-top inherit"
                          :loading="isTableLoading"
                          :pagination.sync="pagination"
                          style="max-height: 350px;"
                          no-data-label="暂无数据"
                          :hide-bottom="tableData.length > 0"
                          color="primary">
              <template v-slot:body-cell-index="props">
                <q-td>
                  {{props.row.__index + 1}}
                </q-td>
              </template>
                <template v-slot:no-data>
                      <div class="full-width row flex-center font-size-14" style="color: #999">
                        暂无数据
                      </div>
                  </template>
              </q-table>
            </div>
        </basic-dialog>
</div>
</template>
<script>
import { getItemList } from 'src/boot/spare/parts'
export default {
  name: 'change-part-dialog',
  props: {
    show: Boolean
  },
  data () {
    return {
      isTableLoading: false,
      tableData: [],
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'sparePartName', label: '备件', align: 'left', field: 'sparePartName' },
        { name: 'useCount', label: '更换数量', align: 'left', field: 'useCount' }
      ]
    }
  },
  watch: {
    show (newPro) {
      this.tableData = []
      newPro && this.getList()
    }
  },
  methods: {
    async getList () {
      const id = this.$attrs.partId
      this.isTableLoading = true
      try {
        const ret = await getItemList({
          orderId: id,
          orderType: this.$attrs.type
        })
        this.isTableLoading = false
        ret.success && (this.tableData = ret?.data?.spareParts || [])
      } catch (error) {
        this.isTableLoading = false
        console.log(error)
      }
    }
  }
}
</script>
